<template>
  <div style="width: 100%; height: 100%" class="test">
  <dv-page target="parent" fit>
   
    <dv-chart-pictorial fit :data="barData" debug  :settings="settings" />
       
     
  </dv-page>

  <!-- <button @click="test">test / {{zIndex}}</button> -->
  </div> 
    
</template>
<script setup lang="ts" >
  import { ref } from 'vue';
import {DvBox, DvPage, DvChartPictorial} from '$comp/index';
 
const rocket = 'path://M-244.396,44.399c0,0,0.47-2.931-2.427-6.512c2.819-8.221,3.21-15.709,3.21-15.709s5.795,1.383,5.795,7.325C-237.818,39.679-244.396,44.399-244.396,44.399z M-260.371,40.827c0,0-3.881-12.946-3.881-18.319c0-2.416,0.262-4.566,0.669-6.517h17.684c0.411,1.952,0.675,4.104,0.675,6.519c0,5.291-3.87,18.317-3.87,18.317H-260.371z M-254.745,18.951c-1.99,0-3.603,1.676-3.603,3.744c0,2.068,1.612,3.744,3.603,3.744c1.988,0,3.602-1.676,3.602-3.744S-252.757,18.951-254.745,18.951z M-255.521,2.228v-5.098h1.402v4.969c1.603,1.213,5.941,5.069,7.901,12.5h-17.05C-261.373,7.373-257.245,3.558-255.521,2.228zM-265.07,44.399c0,0-6.577-4.721-6.577-14.896c0-5.942,5.794-7.325,5.794-7.325s0.393,7.488,3.211,15.708C-265.539,41.469-265.07,44.399-265.07,44.399z M-252.36,45.15l-1.176-1.22L-254.789,48l-1.487-4.069l-1.019,2.116l-1.488-3.826h8.067L-252.36,45.15z'
  

const barData = ref({
  columns: ['渠道', '访问量'],
  rows: [
      ['直接访问', 320],
      ['邮件营销', 302],
      ['联盟广告', 334],
      ['视频广告', 390],
      ['搜索引擎', 330]
  ]
})

const settings = ref({
  gradient: true, 
  label: null,
  // labelSymbol: {
  //   symbol: rocket // [rocket, rocket, rocket, rocket, rocket]
  // }
})
</script>
<style lang="scss" scoped>
.test{
  box-sizing: border-box;
  overflow: hidden;
  // border: 5px solid red;
   .dv-box.inner {
   background: rgb(68, 107, 226, 0.4);
  //  padding:20px;
   font-size:20px;
   text-align: center;
  }
 }
</style>
